<html layout:decorate="~{alarm/alarm_layout}" xmlns:layout="http://www.w3.org/1999/xhtml">
<body>
<div layout:fragment="content_alarm">
    <div class="parameter_main">

        <div style="width: 29%;float: left;margin-left: 5px">

            <div>
                <input type="text" class="search-data-child" name="name" placeholder="搜索名称"
                       style="margin-left: 20px;margin-top: 10px">
            </div>

            <div class="panel panel-primary threshold-div">
                <div id="tree" style="height: 600px;overflow-y :scroll;">
                    <input type="hidden" id="ztreeNodes" th:value="${aTeManage}">
                    <ul id="treeDemo" class="ztree" ></ul>
                </div>
            </div>
        </div>

        <div style="width: 69%;float: right;margin-right: 5px">
            <div>
                <input type="text" class="search-data-child" name="Q_LIKE_thresholdName" placeholder="搜索阈值名称"
                       style="margin-left: 100px;margin-top: 10px">
                <button type="button" id="search-btn" onclick="thresholdSearch('dataTable')" class="btn btn-primary btn-sm"
                        style="margin-left: 10px">搜索
                </button>
            </div>

            <div class="panel panel-primary threshold-div">
                <div style="height: 600px;">
                    <table id="dataTable" data-url="threshold_data" data-page-list=[] data-striped="true"
                           data-pagination="true" data-page-size="15" data-cache="false">
                    </table>
                </div>
            </div>
        </div>
    </div>
    <style>
        .threshold-div {
            margin-top: 10px;
        }

        .bs-bars {
            position: relative;
            margin-top: 0px !important;
            margin-bottom: 0px !important;
            line-height: 34px;
        }
        span{
            color: black;
        }
    </style>
    <script th:line="javascript">

        var setting = {
            view: {
                showCheckbox: true,   //是否显示复选框
                highlightSelected: true, //是否高亮选中
                emptyIcon: '',          //没有子节点的节点图标
                multiSelect: true,   //多选
                collapseAll:{silent:true}
            },
            data: {
                simpleData: {
                    enable: true,        // 使用简单数据模式
                    idKey: "id",        // 节点数据中保存唯一标识的属性名称
                    pIdKey: "pId",      // 节点数据中保存其父节点唯一标识的属性名称
                    rootPId: ""      // 用于修正根节点父节点数据 默认值：null
                }
            },
            callback: {
                onNodeCreated: zTreeOnNodeCreated,
                onClick: function (event, treeId, treeNode) {
                    var id = treeNode.id;
                    var pId = treeNode.pId;
                    $.ajax({
                        url:"/alarm/threshold_put",
                        data:{"id":id,
                              "pId":pId},
                        type:"post",
                        success:function(data){
                            $("#dataTable").bootstrapTable('refresh', {url: 'threshold_data'});
                        }
                    });
                    if(treeNode.type == 0){
                      var ss =  $("#dataTable").attr("data-url","/alarm/threshold_data?"+id);
                     //   alert(ss.attr("data-url"));
                    }

                }
            }

        };
        /**
         * 显示图标
         */
        function zTreeOnNodeCreated(event, treeId, treeNode) {
            var iconCls = "";
            var type = treeNode.type;
            switch (type) {
                case "1":
                    iconCls = "/image/变流器.png";
                    break;
                case "2":
                    iconCls = "/image/电池包.png";
                    break;
                case "3":
                    iconCls = "/image/模组.png";
                    break;
                case "4":
                    iconCls = "/image/单体电池.png";
                    break;
                default:
                    iconCls = "/image/项目（楼宇）.png";
                    break;
            }
            $('#' + treeNode.tId + '_ico').css("background", "url('" + iconCls + "') center center/16px 16px no-repeat");
          /*  $('#' + treeNode.tId + '_ico').fontCss("color", "black");*/
        }
    /**********************页面树结构****************************/
        $(document).ready(function () {
            /**
             * 初始化ztree相关
             */
            var zNodes = $("#ztreeNodes").val();
            zNodes = eval('(' + zNodes + ')');  //转为json数组对象
            var treeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);     //初始化ztree
            // 设置默认展开
            treeObj.expandAll(true);


        });

        /*************************搜索名称*********************************/
        $('input[name="name"]').bind('keypress', function (event) {
           // console.log(event);
            if (event.keyCode == 13) {
                var name = $('input[name="name"]').val();
                //异步请求搜索
                $.post("threshold_manager_list", {name: name}, function (list) {
                   var treeObj =  $.fn.zTree.init($("#treeDemo"), setting, list);
                    treeObj.expandAll(true);    // 设置默认展开
                });
            }
        });
        /***************************搜索阈值名称*********************************/
        function getTable(searchClass, dataFormat, id) {
            $("#"+id).bootstrapTable({
                method : "get",
                sidePagination : "server",
                dataType : "json",
                //设置查询的参数
                queryParams:function queryParams(params){
                    var param = {
                        pageNum: params.offset / params.limit
                    };
                    $("." + searchClass).each(function () {
                        var key = $(this).attr("name");
                        var val = $(this).val();
                        // console.log(key+"===="+val);
                        param[key] = val;
                    });
                    //  console.log(param);
                    return param;
                },
                columns: dataFormat

            });

        };
        function thresholdSearch(id) {
            $("#" + id).bootstrapTable("selectPage", 1);
        }



        /*******************************************table字段***************************************************/
        var dataFormat = [{
            title: '序号',
            align: 'center',
            formatter: function (value, row, index) {
                return index + 1;
            }
        }, {
            field: 'thresholdName',
            align: 'center',
            title: '阈值名称'
        }, {
            field: 'setVal',
            align: 'center',
            title: '设定值'
        }, {
            field: 'updateTime',
            align: 'center',
            title: '最近一次修改时间',
            formatter: function (value, row, index) {
                return formatTimeStrap(value);
            }
        }, {
            field: 'suggestVal',
            align: 'center',
            title: '诊断建议'
        }, {
            title: '操作',
            align: 'center',
            formatter: operateFormatter
        }];

        function operateFormatter(value, row, index) {
            return ['<button class="btn btn-xs btn-info" onclick="updateThreshold(\'' + row.id + '\')">修改</button>' +
            '<button class="btn btn-xs btn-danger" onclick="updateStatus(\'' + row.id + '\')">恢复初始化</button>'].join('');
        }

        function updateThreshold(id) {

            var url = "/alarm/threshold_edit";

            if (id) {
                url += "?id=" + id;
            }

            $("#modal").modal({
                remote: url
            });
        }

        //恢复初始化,使用ajax
        function updateStatus(id) {
            $.ajax({
                url:"/alarm/threshold_reset",
                data:{"id":id},
                type:"post",
                success:function(data){
                    $("#dataTable").bootstrapTable('refresh', {url: 'threshold_data'});
                }
            })
        }

        //初始化table
        window.onload = function () {
            getTable("search-data-child",dataFormat, "dataTable");
        };

    </script>
</div>
</body>
</html>